<template>
    <ui-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     
      <ui-form-item label="活动区域" prop="region">
        <ui-select v-model="ruleForm.region"  placeholder="请选择活动区域" value-key="a" @change="changeTest" >
       <ui-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value"></ui-option>
        </ui-select>
      </ui-form-item>
    
      <!-- <ui-form-item label="活动区域" prop="region">  
      <ui-select v-model="ruleForm.region"  placeholder="请选择活动区域" value-key="a">  
        <ui-option v-for="item in companyList" :key="item.a" :label="item.a" :value="item"></ui-option>  
      </ui-select>  
    </ui-form-item>   -->
     
    <input type="text" @blur="handleblur($event)">
      <ui-form-item>
        <ui-button type="primary" @click="submitForm('ruleForm')">立即创建</ui-button>
        <ui-button @click="resetForm('ruleForm')">重置</ui-button>
      </ui-form-item>
    </ui-form>
  </template>
  <script>
  export default {
    /* DELETE */
    desc: 'Form 组件提供了表单验证的功能，只需要通过 `rules` 属性传入约定的验证规则，并将 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)',
    /* DELETE */
    data() {
      return {
        ruleForm: {
          region: '02',
        },

        companyList:[
        {
            value:'01',
            label:"第一个"
        },
        {
            value:'02',
            label:'第二个',
        },

        ],
        rules: {
          region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
        }
      };
    },
    methods: {
      handleblur(e){
        console.log('输入框的值为',e.target.value);
        
      },
      changeTest(e){
        console.log('下拉框的值为',e);
        
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
  </script>
  